<!--
1. Start plovr in one window (cd javascript; make)
2. Run local web server in the project root directory in second window (python -m SimpleHTTPServer)
3. Open web this file in web browser (http://localhost:8000/javascript/main.html)
-->
<html>
  <head>
    <title>JavaScript Test</title>
    <link rel="stylesheet" href="../../css/main.css" type="text/css" />
    <script src="../../js/ZeroClipboard.min.js"></script>
    <script src="http://localhost:9810/compile?id=index-debug"></script>


  </head>
  <body>
    <h1>Home page</h1>

    <input id="q" value="" placeholder="Placeholder">

    <div id="countryLinkWrapper">
    <a href="/?q=Czech%20Republic" id="countryLink">See coordinate systems of <span id="country">Czech Republic</span></a>

    <div id="countryLinkWrapper">
    <a href="/?q=Czech%20Republic" id="countryLink">Click to see the coordinates systems of <span id="country">Czech Republic</span></a>
    </div>

    <div class="socialicons">

        <a id="share_facebook" href="https://www.facebook.com/sharer/sharer.php?u=http://epsg.io&amp;"><span class="icon-epsg-facebook"></span></a>


    <a id="share_twitterb" href="https://twitter.com/share?original_referer=http://epsg.io&amp;text=Coordinate systems worldwide - &amp;"><span class="icon-epsg-twiter"></span></a>

    <a id="share_pinterest" href="https://pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.oldmapsonline.org%2F&media=http%3A%2F%2Fwww.oldmapsonline.org%2Fimg%2Flogo-old-maps-online.png"><span class="icon-epsg-pinterest"></span></a>

    <a id="share_gplusdark" href="https://plus.google.com/share?url=http://epsg.io/"><span class="icon-epsg-googleplus"></span></a>
    </div>
    </div>
	<script type="text/javascript">home_init();</script>

    <h1>Results page</h1>

    <pre>
    TODO: UTM selectors
    </pre>

	<script type="text/javascript">results_init();</script>

    <h1>Detail page</h1>


    <a href="#" id="trans_deprecated_link">Show deprecated transformations</a>
    <div id="trans_deprecated">
      <ul>
        <li>
        <a href="/5514-1625" title = "Parameter values from S-JTSK to ETRS89 (2) (code 1624). Assumes ETRS89 and WGS 84 can be considered the same to within the accuracy of the transformation.">Slovakia., accuracy 1.0 m,  code 1625 DEPRECATED
        </a>
        </li>
        <li>
        <a href="/5514-4828" title = "Parameter values from S-JTSK to ETRS89 (4) (code 4827). Assumes ETRS89 and WGS 84 can be considered the same to within the accuracy of the transformation.">Slovakia., accuracy 1.0 m,  code 4828 DEPRECATED
        </a>
        </li>
      </ul>
    </div>

    <div id="edit-box-container">
      <div id="eb-menu-container">
        <h4>Export</h4>
        <ul id="eb-menu">
          <li><a class="switcher" id="s_html" href="{{url_format}}.html">Well Known Text as HTML<i></i></a></li>
          <!-- <li><a class="switcher" id="s_prettywkt" href="{{url_format}}.prettywkt">PrettyWKT<i></i></a></li>-->
          <li><a class="switcher switcher_selected" id="s_esriwkt" href="{{url_format}}.esriwkt">ESRI WKT<i></i></a></li>
          <li><a class="switcher" id="s_proj4" href="{{url_format}}.proj4">PROJ.4<i></i></a></li>
          <li><a class="switcher" id="s_proj4js" href="{{url_format}}.proj4js">JavaScript (PROJ.4)<i></i></a></li>
          <li><a class="switcher" id="s_ogpxml" href="{{url_format}}.ogpxml">OGP XML<i></i></a></li>
          <li><a class="switcher" id="s_xml" href="{{url_format}}.xml">XML<i></i></a></li>
        </ul>
      </div>

      <div class="code-definition-container" id="s_html_code">
        <p>Definition: Well Known Text (WKT)</p>
        <ul>
          <li><a href="{{url_format}}.prettywkt">Open</a></li>
          <li><a id="s_html_copyUrl" class="zeroclipboard" data-clipboard-text="http://epsg.io{{url_format}}.prettywkt" href="#">Copy URL</a></li>
          <li><a id="s_html_copyText" class="zeroclipboard" data-clipboard-target="s_html_text" href="#">Copy TEXT</a></li>
          <li><a href="{{url_format}}.prettywkt?download">Download</a></li>

        </ul>
        <div class="syntax">
          {{!export_html}}
        </div>
        <div class="syntax" id="s_html_text">
          <pre>{{export['prettywkt']}}</pre>
        </div>
      </div>


      <div class="code-definition-container" id="s_ogpxml_code">
        <p>Definition: OGP XML</p>
        <ul>
          <li><a href="{{url_format}}.ogpxml">Open</a></li>
          <li><a id="s_ogpxml_copyUrl" class="zeroclipboard" data-clipboard-text="http://epsg.io{{url_format}}.ogpxml" href="#">Copy URL</a></li>
          <li><a id="s_ogpxml_copyText" class="zeroclipboard" data-clipboard-target="s_ogpxml_text" href="#">Copy TEXT</a></li>
          <li><a href="{{url_format}}.xml?download">Download</a></li>

        </ul>
        <div class="syntax">
          {{!ogpxml_highlight}}
        </div>
        <div class="syntax" id="s_ogpxml_text">
          {{ogpxml}}
        </div>
      </div>


      <div class="code-definition-container code_visible" id="s_esriwkt_code">
        <p>Definition: ESRI WKT</p>
        <ul>
          <li><a href="{{url_format}}.esriwkt">Open</a></li>
          <li><a id="s_esriwkt_copyUrl" class="zeroclipboard" data-clipboard-text="http://epsg.io{{url_format}}.esriwkt" href="#">Copy URL</a></li>
          <li><a id="s_esriwkt_copyText" class="zeroclipboard" data-clipboard-target="s_esriwkt_text" href="#">Copy TEXT</a></li>
          <li><a href="{{url_format}}.esriwkt?download">Download</a></li>

        </ul>
        <div id="s_esriwkt_text" class="syntax">
          <pre>{{export['esriwkt']}}</pre>
        </div>
      </div>

      <div class="code-definition-container" id="s_proj4_code">
        <p>Definition: PROJ.4</p>
        <ul>
          <li><a href="{{url_format}}.proj4">Open</a></li>
          <li><a id="s_proj4_copyUrl" class="zeroclipboard" data-clipboard-text="http://epsg.io{{url_format}}.proj4" href="#">Copy URL</a></li>
          <li><a id="s_proj4_copyText" class="zeroclipboard" data-clipboard-target="s_proj4_text" href="#">Copy TEXT</a></li>
          <li><a href="{{url_format}}.proj4?download">Download</a></li>

        </ul>
        <div id="s_proj4_text" class="syntax">
          <pre>{{export['proj4']}}</pre>
        </div>
      </div>

      <div class="code-definition-container" id="s_proj4js_code">
        <p>Definition: JavaScript (PROJ.4) </p>
        <ul>
          <li><a href="{{url_format}}.js">Open</a></li>
          <li><a id="s_proj4js_copyUrl" class="zeroclipboard" data-clipboard-text="http://epsg.io{{url_format}}.js" href="#">Copy URL</a></li>
          <li><a id="s_proj4js_copyText" class="zeroclipboard" data-clipboard-target="s_proj4js_text" href="#">Copy TEXT</a></li>
          <li><a href="{{url_format}}.js?download">Download</a></li>

        </ul>
        <div id="s_proj4js_text" class="syntax">
          <pre>{{export['proj4js']}}</pre>
        </div>
      </div>

      <div class="code-definition-container" id="s_xml_code">
        <p>Definition: XML</p>
        <ul>
          <li><a href="{{url_format}}.xml">Open</a></li>
          <li><a id="s_xml_copyUrl" class="zeroclipboard" data-clipboard-text="http://epsg.io{{url_format}}.xml"href="#">Copy URL</a></li>
          <li><a id="s_xml_copyText" class="zeroclipboard" data-clipboard-target="s_xml_text" href="#">Copy TEXT</a></li>
          <li><a href="{{url_format}}.xml?download">Download</a></li>

        </ul>
        <div class="syntax">
          {{!xml_highlight}}
        </div>
        <div id="s_xml_text" class="syntax">
          <pre>{{export['xml']}}</pre>
        </div>
      </div>

    </div>



    <pre>
    DONE: switching WTK/PROJ4/...
    DONE: show/hide deprecated transformations
    DONE: Copy&amp;paste URL or WKT
    </pre>

	<script type="text/javascript">detail_init();</script>

    <h1>Map page</h1>

    <a href="map.html">map.html</a>

    <pre>
    TODO: DMS, DM, D switching
    DONE: Copy&amp;paste coordinates
    </pre>


  </body>
</html>
